/**
 * @description 详情
 */

import { Tabs } from "antd"

import VideoSrc from '@/assets/video.mp4'

import SharePlatform from "@/components/SharePlatform"
import DetailInfo from "./Component/DetailInfo"
import Banner1 from "../Layout/banner"
import ThumbsUp from "./Component/ThumbsUp"
import ListHot from "@/PageCompnents/Hot/ListHot"

import DiscussTab from "./Component/DiscussTab"
import ChapterTab from "./Component/ChapterTab"
import { useMemo } from "react"


function DetailPage({ detail, paginationBase }) {



  const tabList = useMemo(() => {
    return [
      {
        key: "desc",
        label: "商品详情",
        children: <div>这是商品详情</div>,
      },
      {
        key: "richtext",
        label: "富文本",
        children: <div>这是用户配置的富文本</div>,
      },
      {
        key: "discuss",
        label: "评论",
        children: <DiscussTab base={detail.discuss.base} paginationBase={paginationBase} />,
      },
      {
        key: 'ChapterTab',
        label: '目录',
        children: <ChapterTab />
      },
    ]
  }, [detail.discuss.base])
  return (
    <div className="detailpage">

      {/* 商品属性 */}
      <DetailInfo
        base={detail.attr.base}
      />

      {/* 商品图片 */}
      <Banner1 base={detail.detailpicture.base} className='detailpicture' />

      {/* 点赞 */}
      <ThumbsUp base={detail.thumbsup.base} />

      {/* 视频 */}
      <video className='detailvideo' src={VideoSrc} controls="controls" autoPlay={false}></video>

      {/* 商品详情: tab标签页 */}
      <Tabs
        className='detailtab'
        destroyInactiveTabPane={true}
        items={tabList}
      />

      {/* 热门 */}
      <ListHot base={detail.detailhot.base} className='detailhot' />

      {/* 悬浮工具栏 (回顶部+ 分享链接) */}
      <SharePlatform />
    </div >
  )
}

export default DetailPage